<!DOCTYPE html>
<link rel="stylesheet" href="style.css">

<div id="slider" class="slider">
  <div class="thumb"></div>
</div>

<script>
  let thumb = slider.querySelector('.thumb');
  let shiftX;

  thumb.onpointerdown = function(event) {
    event.preventDefault(); // prevent selection start (browser action)

    shiftX = event.clientX - thumb.getBoundingClientRect().left;

    thumb.setPointerCapture(event.pointerId);
  };

  thumb.onpointermove = function(event) {
    let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;

    // if the pointer is out of slider => adjust left to be within the bounaries
    if (newLeft < 0) {
      newLeft = 0;
    }
    let rightEdge = slider.offsetWidth - thumb.offsetWidth;
    if (newLeft > rightEdge) {
      newLeft = rightEdge;
    }

    thumb.style.left = newLeft + 'px';
  };

  thumb.ondragstart = () => false;

</script>
